<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Title</title>
	</head>
	<body>
		<div id="test">尚硅谷IT教育</div>

		<div id="app">
			<ul>
				<li>test1</li>
				<li>test2</li>
				<li>test3</li>
			</ul>
		</div>

		<!--
    1. [].slice.call(lis): 将伪数组转换为真数组
    2. node.nodeType: 得到节点类型
    3. Object.defineProperty(obj, propertyName, {}): 给对象添加属性(指定描述符)
    4. Object.keys(obj): 得到对象自身可枚举属性组成的数组
    5. obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性
    6. DocumentFragment: 文档碎片(高效批量更新多个节点)
    -->

		<script type="text/javascript">
			// 1. [].slice.call(lis): 将伪数组转换为真数组
			const lis = document.querySelectorAll("li");

			console.log(lis); //伪数组li
			// 简单的写法：
			console.log([].slice.call(lis)); //改变this指向遍历变为真数组

			// Array.prototype写法
			console.log(Array.prototype.slice.call(lis)); //使用显示原型上的数组
			// console.log(Array.from(lis)); // ES6 将伪数组转换为真数组

			// 2. node.nodeType: 得到节点类型
			console.log(lis[0]); //第一个li dom对象
			console.log(lis[0].nodeType); //文本节点， 1
			console.dir(lis[0].childNodes[0].nodeType); // 3

			// 3. Object.defineProperty(obj, propertyName, {}): 给对象添加属性(指定描述符)
			const person = { name: "haijing" };
			Object.defineProperty(person, "age", {
				value: 58,
				writable: true, // 是否可写
				configurable: true, // 是否重新配置（删除，重新Object.defineProperty定义）
				enumerable: true, // 是否枚举 for in
				// get() {
				// 	// 属性读取方法：读取数据时会调用get
				// },
			// 	set(val) {
			// 		// 属性设置方法：设置数据时会调用set
			// 	},
			});
					console.log(person)

			// // 4. Object.keys(obj): 得到对象自身可枚举属性组成的数组
			// const obj = { name: 1, age: 2 };
			// console.log(Object.keys(obj)); // ['name', 'age']
			// console.log(Object.values(obj)); // [1, 2]

			// obj.__proto__.a = 3;
			// // 5. obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性
			// console.log(obj.hasOwnProperty("name"));
			// console.log(obj.hasOwnProperty("a"));
			// console.log(obj.hasOwnProperty("b"));

			// // 6. DocumentFragment: 文档碎片(高效批量更新多个节点)
			// // 创建文档碎片节点
			// const fragment = document.createDocumentFragment();
			// console.log(fragment);
			// const app = document.getElementById("app");
			// // 将DOM元素添加到文档碎片节点中(DOM元素不会在DOM树上了)
			// let child;
			// // 首先赋值：child = app.firstChild
			// // 然后判断 child 是否有值，如果有值就会进入循环语句，如果没有值就会结束循环
			// while ((child = app.firstChild)) {
			// 	fragment.appendChild(child); // DOM元素不会在DOM树上了
			// }

			// console.log(fragment);
			// // 解析 - 操作DOM
			// [].slice.call(fragment.childNodes).forEach((node) => {
			// 	if (node.nodeType === 1) {
			// 		// console.log(node);
			// 		[].slice.call(node.childNodes).forEach((node) => {
			// 			if (node.nodeType === 1) {
			// 				// console.log(node);
			// 				node.textContent += "~~~~";
			// 			}
			// 		});
			// 	}
			// });

			// // 将解析好的DOM元素从文档碎片节点中添加到页面上
			// app.appendChild(fragment);
		</script>
	</body>
</html>
